<template>
  <div class="main">
    <div class="float-right w-[100%]">
      <el-form
        ref="formRef"
        :inline="true"
        :model="formData"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="岗位名称：" prop="postname">
          <el-input
            v-model="formData.postname"
            placeholder="请输入岗位名称"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="岗位编码：" prop="postCode">
          <el-input
            v-model="formData.postCode"
            placeholder="请输入岗位编码"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="username">
          <el-select
            v-model="formData.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch"
            ><el-icon class="el-icon--left"><Search /></el-icon>搜索</el-button
          >
          <el-button @click="resetForm(formRef)"
            ><el-icon class="el-icon--left"><Refresh /></el-icon>重置</el-button
          >
        </el-form-item>
      </el-form>

      <PureTableBar title="" @refresh="onSearch" :needtool="false">
        <template v-slot="{ size, checkList }">
          <div class="table-header-btns">
            <el-button type="primary" plain @click="openDialog('add')">
              <el-icon class="el-icon--left"><CirclePlus /></el-icon>
              新增
            </el-button>
            <el-button type="success" plain>
              <el-icon class="el-icon--left"><EditPen /></el-icon>
              修改
            </el-button>
            <el-button type="danger" plain>
              <el-icon class="el-icon--left"><Delete /></el-icon>
              删除
            </el-button>
          </div>
          <pure-table
            border
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :data="tableData"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="modify(row)"
              >
                <el-icon class="el-icon--left"><EditPen /></el-icon>
                修改
              </el-button>
              <el-button type="primary" link :size="size">
                <el-icon class="el-icon--left"><Delete /></el-icon>
                删除
              </el-button>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="modify(row)"
              >
                <el-icon class="el-icon--left"><User /></el-icon>
                人员
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
export default {
  name: "postManager",

  components: { PureTableBar },

  data() {
    return {
      formData: {},
      columns: [
        {
          label: "序号",
          type: "index",
          width: 70
        },
        {
          label: "岗位名称",
          prop: "postname",
          minWidth: 130
        },
        {
          label: "岗位编码",
          prop: "username",
          minWidth: 130
        },
        {
          label: "岗位类别",
          prop: "nickname",
          minWidth: 130
        },
        {
          label: "排序号",
          prop: "nickname",
          minWidth: 130
        },
        {
          label: "状态",
          prop: "status",
          minWidth: 90
        },
        {
          label: "创建时间",
          minWidth: 90,
          prop: "createTime",
          formatter: ({ createTime }) =>
            dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
        },
        {
          label: "操作",
          fixed: "right",
          width: 230,
          slot: "operation"
        }
      ],
      loading: false,
      tableData: [
        {
          postname: "总经理"
        }
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        background: true
      },
      size: "small"
    };
  },

  methods: {
    useRenderIcon,
    modify() {}
  },

  mounted() {}
};
</script>

<style lang="scss" scoped>
.table-header-btns {
  margin-bottom: 8px;
}
</style>
